$(function(){
    var i = 0;
    var aLi = $("#photo li");
    var aButton = $("#button li");
    aButton.each(function(){
        $(this).on("click",function(){
            var indexs = parseInt($(this).attr("index")) - 1;
            $("#photo").stop().animate({top : -indexs*600},100);
            $("#button li:eq("+indexs+")").addClass('on').siblings().removeClass('on');
        })
    })
    $('.carousel').on('mousewheel', function(event, delta, deltaX, deltaY) {
        var int = parseInt($("#photo").css("top"));
        if(delta < 0){
            if(i < aLi.length){
                i++;
            }
            if(int != -4200){
                $("#photo").stop().animate({top : -i*600},100);
                $("#button li:eq("+i+")").addClass('on').siblings().removeClass('on');
            }
        }
        if(delta > 0){
            if(i < aLi.length){
                i--;
            }
            if(int < 0){
                $("#photo").stop().animate({top : "+=600"},100);
                $("#button li:eq("+i+")").addClass('on').siblings().removeClass('on');
            }else{
                $("#photo").animate().stop();
            }
        }
        console.log(event.deltaX, event.deltaY, event.deltaFactor);
    });
// 	var i = 0;
// 	var $size = $(".carousel .photo li").length;
// 	var $spanSize = $(".carousel .buttons li").length;
// 	var buttons = $(".carousel .buttons li");
// 	buttons.first().addClass('on');
// 	var aLi = document.getElementById("photo").getElementsByTagName("li");
// 	var aButton = document.getElementById("button").getElementsByTagName("li");
// 	var scrollFunc = function (e) {
//     var direct = 0;
//     e = e || window.event;
//     if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
//         if (e.wheelDelta  > 0) { //当滑轮向上滚动时
//             $(".carousel").bind('mousewheel', function(event) {
//   				var int = parseInt($("#photo").css("top"));
//             	if(int < 0){
//             		$("#photo").stop().animate({top : "+=600"},100);
//             	}else{
//             		$("#photo").animate().stop();
//             	}
// 			});

//         }
//         if (e.wheelDelta < 0) { //当滑轮向下滚动时
//             $(".carousel").bind('mousewheel', function() {
//             	var int = parseInt($("#photo").css("top"));
//             	if(int != -4200){
//             		$("#photo").stop().animate({top : "-=600"},100);
//             	}
// 			});
// 			for(var j = 0;j < aLi.length;j++){
// 				aLi[j].index = j;
// 				aLi[j].onmousewheel = function(){
// 					//设置滚轮滚动时classname改变
// 				if(aButton[this.index].className = "on"){
// 					aButton[this.index].className = "";
// 				}else{
// 					aButton[this.index].className = "on";
// 				}
// 			}
// 		}
//      }
//     } else if (e.detail) {  //Firefox滑轮事件
//         if (e.detail> 0) { //当滑轮向上滚动时
//             $(".carousel").bind('mousewheel', function(event) {
//             	if($("#photo").css("top") < "0px"){
//             		$("#photo").stop().animate({top : "+=600"},100);
//             	}else{
//             		 $("#photo").animate().stop();
//             	}
// 			});
//         }
//         if (e.detail< 0) { //当滑轮向下滚动时
//             $(".carousel").bind('mousewheel', function() {
//             	if($("#photo").css("top") != "-4200px"){
//             		$("#photo").stop().animate({top : "-=600"},100);
//             	}
// 			});
//         }
//     }
// }
//     //给页面绑定滑轮滚动事件
//     if (document.addEvent$photoener) {
//         document.addEvent$photoener('DOMMouseScroll', scrollFunc, false);
//     }
//     //滚动滑轮触发scrollFunc方法
//     window.onmousewheel = document.onmousewheel = scrollFunc;  
})